<template>
  <div>
    <el-row>
      <el-col :span="24"
        ><SearchIndex @clickSearch="clickSearchHandle"
        @categoryChange="categoryChange"
        @searchQueryChange="searchQueryChange"
      /></el-col>
    </el-row>
    <el-row>
      <el-col :span="6" v-for="item in items.slice(0,4)" :key="item.id"><DataCard :apiData="item" /></el-col>
    </el-row>
    <el-row>
      <el-col :span="6" v-for="item in items.slice(4,8)" :key="item.id"><DataCard :apiData="item"/></el-col>
    </el-row>
    <el-row>
      <el-col :span="6" v-for="item in items.slice(8,12)" :key="item.id"><DataCard :apiData="item"/></el-col>
    </el-row>
    <el-row>
      <el-col :span="6" v-for="item in items.slice(12,16)" :key="item.id"><DataCard :apiData="item"/></el-col>
    </el-row>
    <el-row>
      <el-col :span="6" v-for="item in items.slice(16,20)" :key="item.id"><DataCard :apiData="item"/></el-col>
    </el-row>
    <el-row>
      <el-col :span="6" v-for="item in items.slice(20,24)" :key="item.id"><DataCard :apiData="item"/></el-col>
    </el-row>
    <el-row>
      <el-col :span="6" v-for="item in items.slice(24,28)" :key="item.id"><DataCard :apiData="item"/></el-col>
    </el-row>
    <el-pagination background layout="prev, pager, next" :total="total"
      :current-page="page"
      :page-size="limit"
      @current-change="pageChange"
     />                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
  </div>
</template>
<script>
import SearchIndex from "../components/searchIndex.vue";
import searchApi from "@/api/search";
import DataCard from "@/components/dataCard.vue"
export default {
  data() {
    return {
      page: 1,  //当前页码
      limit: 28,
      total: 0, //总api数
      content: "", //搜索框内容
      category:"",  //搜索类型
      items:[     //数据列表
        {
          id:"1",
          name:"SEO Automations",
          apiUrl:"https://rapidapi.com/BigFoxMedia/api/seo-automations/",
          apiHost:"",
          endPoint:"",
          description:"Optimize your website effortlessly with SEOOptimizeAPI - the powerful tool that provides valuable insights and automates repetitive tasks. With SEOOptimizeAPI, you can take the guesswork out of website optimization. The API utilizes advanced algorithms and technologies to provide in-depth insights into your website's performance and help you identify areas for improvement. And with its easy-to-use API endpoints, you can automate repetitive tasks and save time and effort.",
          endPointCategory:"",
          neccessaryParam:"",
          optionalParam:"",
          updateTime:"Feb-23",
          author:"Author",
          popularity:"9.5",
          latency: 15299,
          serviceLevel:88
        }
        
      ]
    };
  },
  components: {
    SearchIndex,
    DataCard,
  },
  methods: {
    clickSearchHandle(content = " ",category) {

      category = category ?? 'default'  //给category赋默认值
      category = category ==''? 'default':category
      console.log(category)
      this.content = content;
      this.category = category
      this.page = 1
      searchApi.searchByContent(content,category,this.page).then(result=>{
        console.log(result.data)
        const {records, total} = result.data.data
        this.total = total
        this.items = records
      }).finally()
    },
    pageChange(page){
      this.page = page
      console.log(page)
      searchApi.searchByContent(this.content,this.category,page).then(result=>{
        console.log(result.data)
        const {records, total} = result.data.data
        this.total = total
        this.items = records
      });
    },
    categoryChange(category){
      this.category = category
    },
    searchQueryChange(content){
      this.content = content
    }

  },
};
</script>

<style >
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>